import React from 'react'
import { useNotifications } from '../hooks/useNotifications'
import { EmptyState } from '../components/ui/EmptyState'
import { LoadingSpinner } from '../components/ui/LoadingSpinner'
import { Button } from '../components/ui/Button'
import { Bell, Settings } from 'lucide-react'

export function Notifications() {
  const { notifications, loading, markAllAsRead } = useNotifications()

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Notifications</h1>
          <p className="text-gray-600">
            Stay updated with your research alerts and recommendations
          </p>
        </div>
        
        <div className="flex items-center space-x-2">
          {notifications.some(n => !n.read) && (
            <Button variant="outline" size="sm" onClick={markAllAsRead}>
              Mark All Read
            </Button>
          )}
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => window.location.href = '/app/settings?tab=notifications'}
          >
            <Settings className="h-4 w-4 mr-2" />
            Settings
          </Button>
        </div>
      </div>

      {/* Notifications list */}
      {loading ? (
        <div className="flex items-center justify-center py-12">
          <LoadingSpinner size="lg" />
        </div>
      ) : notifications.length === 0 ? (
        <EmptyState
          icon={<Bell className="h-12 w-12 text-gray-400" />}
          title="No notifications"
          description="You're all caught up! New notifications will appear here."
          action={
            <Button onClick={() => window.location.href = '/app/settings?tab=notifications'}>
              <Settings className="h-4 w-4 mr-2" />
              Configure Notifications
            </Button>
          }
        />
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 divide-y divide-gray-100">
          {/* Notification items would go here */}
          <p className="p-6 text-gray-600">Notification list implementation here...</p>
        </div>
      )}
    </div>
  )
}